{% extends 'assets/base.html' %}
{% load static %}

{% block title %}调拨详情 - {{ transfer.transfer_number }} - 固定资产管理系统{% endblock %}

{% block extra_css %}
<style>
    .detail-card {
        background: white;
        border-radius: 10px;
        padding: 25px;
        margin-bottom: 20px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    
    .section-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 15px 20px;
        border-radius: 10px 10px 0 0;
        margin: -25px -25px 20px -25px;
    }
    
    .status-badge {
        font-size: 1em;
        padding: 8px 16px;
        border-radius: 20px;
    }
    
    .status-draft { background-color: #6c757d; }
    .status-pending { background-color: #ffc107; color: #000; }
    .status-approved { background-color: #28a745; }
    .status-rejected { background-color: #dc3545; }
    .status-in_transit { background-color: #17a2b8; }
    .status-completed { background-color: #28a745; }
    .status-cancelled { background-color: #6c757d; }
    
    .priority-urgent { color: #dc3545; font-weight: bold; }
    .priority-high { color: #fd7e14; }
    .priority-medium { color: #ffc107; }
    .priority-low { color: #28a745; }
    
    .asset-item {
        border: 1px solid #e9ecef;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 10px;
        transition: all 0.3s;
    }
    
    .asset-item:hover {
        border-color: #007bff;
        box-shadow: 0 2px 8px rgba(0,123,255,0.15);
    }
    
    .change-indicator {
        background: #fff3cd;
        border: 1px solid #ffeaa7;
        border-radius: 4px;
        padding: 5px 10px;
        margin: 5px 0;
    }
    
    .change-arrow {
        color: #007bff;
        font-weight: bold;
        margin: 0 10px;
    }
    
    .timeline {
        position: relative;
        padding-left: 30px;
    }
    
    .timeline::before {
        content: '';
        position: absolute;
        left: 15px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: #dee2e6;
    }
    
    .timeline-item {
        position: relative;
        margin-bottom: 20px;
    }
    
    .timeline-item::before {
        content: '';
        position: absolute;
        left: -23px;
        top: 5px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #007bff;
        border: 2px solid white;
        box-shadow: 0 0 0 2px #007bff;
    }
    
    .timeline-item.completed::before {
        background: #28a745;
        box-shadow: 0 0 0 2px #28a745;
    }
    
    .timeline-item.pending::before {
        background: #ffc107;
        box-shadow: 0 0 0 2px #ffc107;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h2><i class="fas fa-exchange-alt"></i> 调拨详情</h2>
                    <p class="text-muted mb-0">调拨单号: <strong>{{ transfer.transfer_number }}</strong></p>
                </div>
                <div>
                    {% if transfer.status == 'draft' and transfer.applicant == request.user %}
                        <form method="post" action="{% url 'assets:transfer_submit' transfer.pk %}" class="d-inline">
                            {% csrf_token %}
                            <button type="submit" class="btn btn-success" onclick="return confirm('确定要提交此调拨申请吗？')">
                                <i class="fas fa-paper-plane"></i> 提交申请
                            </button>
                        </form>
                    {% endif %}
                    
                    {% if can_approve and transfer.status == 'pending' %}
                        <a href="{% url 'assets:transfer_approve' transfer.pk %}" class="btn btn-warning">
                            <i class="fas fa-gavel"></i> 审批
                        </a>
                    {% endif %}
                    
                    {% if can_execute %}
                        <a href="{% url 'assets:transfer_execute' transfer.pk %}" class="btn btn-info">
                            <i class="fas fa-play"></i> 执行调拨
                        </a>
                    {% endif %}
                    
                    <a href="{% url 'assets:transfer_list' %}" class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left"></i> 返回列表
                    </a>
                </div>
            </div>
            
            <div class="row">
                <!-- 基本信息 -->
                <div class="col-md-8">
                    <div class="detail-card">
                        <div class="section-header">
                            <h5><i class="fas fa-info-circle"></i> 基本信息</h5>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <table class="table table-borderless">
                                    <tr>
                                        <td><strong>调拨标题:</strong></td>
                                        <td>{{ transfer.title }}</td>
                                    </tr>
                                    <tr>
                                        <td><strong>调拨类型:</strong></td>
                                        <td><span class="badge bg-secondary">{{ transfer.get_transfer_type_display }}</span></td>
                                    </tr>
                                    <tr>
                                        <td><strong>申请人:</strong></td>
                                        <td>
                                            <i class="fas fa-user"></i> {{ transfer.applicant.username }}
                                            {% if transfer.applicant_department %}
                                                <br><small class="text-muted">{{ transfer.applicant_department.name }}</small>
                                            {% endif %}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><strong>优先级:</strong></td>
                                        <td>
                                            <span class="priority-{{ transfer.priority }}">
                                                <i class="fas fa-flag"></i> {{ transfer.get_priority_display }}
                                            </span>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            <div class="col-md-6">
                                <table class="table table-borderless">
                                    <tr>
                                        <td><strong>创建时间:</strong></td>
                                        <td>{{ transfer.created_at|date:"Y-m-d H:i:s" }}</td>
                                    </tr>
                                    <tr>
                                        <td><strong>预期完成:</strong></td>
                                        <td>
                                            {{ transfer.expected_completion_date|date:"Y-m-d H:i:s" }}
                                            {% if transfer.is_overdue %}
                                                <br><small class="text-danger"><i class="fas fa-exclamation-triangle"></i> 已超期</small>
                                            {% endif %}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><strong>资产数量:</strong></td>
                                        <td><span class="badge bg-info">{{ transfer.asset_count }} 个</span></td>
                                    </tr>
                                    <tr>
                                        <td><strong>预估成本:</strong></td>
                                        <td>
                                            {% if transfer.estimated_cost %}
                                                ¥{{ transfer.estimated_cost }}
                                            {% else %}
                                                <span class="text-muted">未设置</span>
                                            {% endif %}
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        
                        <div class="row mt-3">
                            <div class="col-12">
                                <h6><strong>调拨原因:</strong></h6>
                                <p class="text-muted">{{ transfer.reason }}</p>
                                
                                {% if transfer.description %}
                                    <h6><strong>详细说明:</strong></h6>
                                    <p class="text-muted">{{ transfer.description }}</p>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    
                    <!-- 目标信息 -->
                    <div class="detail-card">
                        <div class="section-header">
                            <h5><i class="fas fa-bullseye"></i> 目标信息</h5>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-4">
                                <h6><strong>目标部门:</strong></h6>
                                <p>
                                    {% if transfer.target_department %}
                                        <i class="fas fa-building"></i> {{ transfer.target_department.name }}
                                    {% else %}
                                        <span class="text-muted">未指定</span>
                                    {% endif %}
                                </p>
                            </div>
                            <div class="col-md-4">
                                <h6><strong>目标位置:</strong></h6>
                                <p>
                                    {% if transfer.target_location %}
                                        <i class="fas fa-map-marker-alt"></i> {{ transfer.target_location.name }}
                                    {% else %}
                                        <span class="text-muted">未指定</span>
                                    {% endif %}
                                </p>
                            </div>
                            <div class="col-md-4">
                                <h6><strong>目标使用人:</strong></h6>
                                <p>
                                    {% if transfer.target_user %}
                                        <i class="fas fa-user"></i> {{ transfer.target_user.username }}
                                    {% else %}
                                        <span class="text-muted">未指定</span>
                                    {% endif %}
                                </p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 调拨资产列表 -->
                    <div class="detail-card">
                        <div class="section-header">
                            <h5><i class="fas fa-boxes"></i> 调拨资产列表</h5>
                        </div>
                        
                        {% for item in transfer.transfer_items.all %}
                        <div class="asset-item">
                            <div class="row align-items-center">
                                <div class="col-md-3">
                                    <h6 class="mb-1">{{ item.asset.asset_number }}</h6>
                                    <small class="text-muted">{{ item.asset.name }}</small>
                                </div>
                                <div class="col-md-2">
                                    <span class="badge bg-secondary">{{ item.asset.category.name }}</span>
                                </div>
                                <div class="col-md-6">
                                    {% for change in item.get_changes %}
                                    <div class="change-indicator">
                                        <small>
                                            <strong>{{ change.field }}:</strong> 
                                            {{ change.old }} <span class="change-arrow">→</span> {{ change.new }}
                                        </small>
                                    </div>
                                    {% endfor %}
                                </div>
                                <div class="col-md-1">
                                    <span class="badge bg-{% if item.status == 'completed' %}success{% elif item.status == 'failed' %}danger{% elif item.status == 'in_progress' %}warning{% else %}secondary{% endif %}">
                                        {{ item.get_status_display }}
                                    </span>
                                </div>
                            </div>
                            
                            {% if item.notes %}
                            <div class="row mt-2">
                                <div class="col-12">
                                    <small class="text-muted">
                                        <i class="fas fa-sticky-note"></i> {{ item.notes }}
                                    </small>
                                </div>
                            </div>
                            {% endif %}
                            
                            {% if item.error_message %}
                            <div class="row mt-2">
                                <div class="col-12">
                                    <small class="text-danger">
                                        <i class="fas fa-exclamation-triangle"></i> {{ item.error_message }}
                                    </small>
                                </div>
                            </div>
                            {% endif %}
                        </div>
                        {% endfor %}
                    </div>
                </div>
                
                <!-- 状态和进度 -->
                <div class="col-md-4">
                    <div class="detail-card">
                        <div class="section-header">
                            <h5><i class="fas fa-chart-line"></i> 状态和进度</h5>
                        </div>
                        
                        <div class="text-center mb-4">
                            <span class="status-badge status-{{ transfer.status }}">
                                {{ transfer.get_status_display }}
                            </span>
                        </div>
                        
                        <div class="timeline">
                            <div class="timeline-item completed">
                                <div class="timeline-content">
                                    <h6>申请创建</h6>
                                    <small class="text-muted">{{ transfer.created_at|date:"Y-m-d H:i:s" }}</small>
                                    <p class="mb-0">由 {{ transfer.applicant.username }} 创建</p>
                                </div>
                            </div>
                            
                            {% if transfer.status != 'draft' %}
                            <div class="timeline-item completed">
                                <div class="timeline-content">
                                    <h6>申请提交</h6>
                                    <small class="text-muted">{{ transfer.updated_at|date:"Y-m-d H:i:s" }}</small>
                                    <p class="mb-0">申请已提交，等待审批</p>
                                </div>
                            </div>
                            {% endif %}
                            
                            {% if transfer.approved_at %}
                            <div class="timeline-item completed">
                                <div class="timeline-content">
                                    <h6>审批{% if transfer.status == 'approved' %}通过{% else %}结果{% endif %}</h6>
                                    <small class="text-muted">{{ transfer.approved_at|date:"Y-m-d H:i:s" }}</small>
                                    <p class="mb-0">
                                        由 {{ transfer.approver.username }} 
                                        {% if transfer.status == 'approved' %}审批通过{% else %}处理{% endif %}
                                    </p>
                                    {% if transfer.approval_notes %}
                                        <p class="mb-0 mt-1"><small>{{ transfer.approval_notes }}</small></p>
                                    {% endif %}
                                </div>
                            </div>
                            {% endif %}
                            
                            {% if transfer.started_at %}
                            <div class="timeline-item completed">
                                <div class="timeline-content">
                                    <h6>开始执行</h6>
                                    <small class="text-muted">{{ transfer.started_at|date:"Y-m-d H:i:s" }}</small>
                                    <p class="mb-0">由 {{ transfer.executor.username }} 开始执行</p>
                                </div>
                            </div>
                            {% endif %}
                            
                            {% if transfer.completed_at %}
                            <div class="timeline-item completed">
                                <div class="timeline-content">
                                    <h6>调拨完成</h6>
                                    <small class="text-muted">{{ transfer.completed_at|date:"Y-m-d H:i:s" }}</small>
                                    <p class="mb-0">调拨执行完成</p>
                                    {% if transfer.actual_cost %}
                                        <p class="mb-0 mt-1"><small>实际成本: ¥{{ transfer.actual_cost }}</small></p>
                                    {% endif %}
                                </div>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                    
                    <!-- 统计信息 -->
                    <div class="detail-card">
                        <div class="section-header">
                            <h5><i class="fas fa-chart-pie"></i> 统计信息</h5>
                        </div>
                        
                        <div class="row text-center">
                            <div class="col-6">
                                <h4 class="text-primary">{{ transfer.asset_count }}</h4>
                                <small class="text-muted">资产数量</small>
                            </div>
                            <div class="col-6">
                                <h4 class="text-success">¥{{ transfer.total_value|floatformat:2 }}</h4>
                                <small class="text-muted">总价值</small>
                            </div>
                        </div>
                        
                        {% if transfer.duration_days %}
                        <div class="row text-center mt-3">
                            <div class="col-12">
                                <h4 class="text-info">{{ transfer.duration_days }}</h4>
                                <small class="text-muted">处理天数</small>
                            </div>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // 自动刷新状态
    if (['pending', 'in_transit'].includes('{{ transfer.status }}')) {
        setInterval(function() {
            location.reload();
        }, 30000); // 30秒刷新一次
    }
});
</script>
{% endblock %}